/**
 * This file is part of Covalent.
 *
 * Licensed under the Apache License 2.0 (the "License"). A copy of the
 * License may be obtained with this software package or at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Use of this file is prohibited except in compliance with the License.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { alpha, AppBar, IconButton, Toolbar } from '@mui/material'
import { Menu as MenuIcon } from '@mui/icons-material'

import { toggleLatticeDrawer } from '../../redux/commonSlice'
import { useDispatch } from 'react-redux'

const MobileAppBar = () => {
  const dispatch = useDispatch()

  return (
    <AppBar
      data-testid="mobile appbar"
      position="fixed"
      sx={(theme) => ({
        display: {
          xs: 'block',
          md: 'none',
        },
        bgcolor: alpha(theme.palette.background.paper, 0.3),
        backdropFilter: 'blur(16px)',
      })}
    >
      <Toolbar>
        <IconButton
          sx={{ mr: 2 }}
          color="inherit"
          edge="start"
          onClick={() => dispatch(toggleLatticeDrawer())}
        >
          <MenuIcon />
        </IconButton>
      </Toolbar>
    </AppBar>
  )
}

export default MobileAppBar
